<template>
    <div class="home-top">
        <h3>人气推荐</h3>
        <div class="content">
            <van-card v-for="item in goodsList" :key="item.id" :tag="item.tag" :price="item.retail_price"
                :origin-price="item.origin_price" :desc="item.goods_brief" :title="item.name"
                :thumb="item.list_pic_url">
            </van-card>
        </div>
    </div>
</template>

<script setup>
const goodsList = [
    {
        retail_price: '23.60',
        name: '人间失格',
        goods_brief: '这只不过是一部“令人不愉快的”、“自我陶醉”的作品',
        list_pic_url: '/images/top1.jpg',
        tag: 'TOP1'
    },
    {
        retail_price: '88.00',
        origin_price: '98.00',
        name: '青眼卡组',
        goods_brief: 'SD47卡组牌组预组 青之眼的光临 青眼白龙',
        list_pic_url: '/images/top2.jpg',
        tag: 'TOP2'
    },
    {
        retail_price: '128.00',
        origin_price: '168.00',
        name: '可躺可睡休闲懒人沙发',
        goods_brief: '轻松看书、社交、办公、舒适放松',
        list_pic_url: '/images/top3.jpg',
        tag: 'TOP3'
    },
    {
        retail_price: '24.90',
        origin_price: '29.90',
        name: '港荣蒸蛋糕',
        goods_brief: '口感绵柔,QQ弹弹,好吃不上火!',
        list_pic_url: '/images/top4.jpg',
        tag: 'TOP4'
    },
    {
        retail_price: '168.00',
        origin_price: '199.00',
        name: 'AI智能棋盘',
        goods_brief: '男孩子男童儿童6岁7以上8女孩9十10女童12小朋友实用',
        list_pic_url: '/images/top5.jpg',
        tag: 'TOP5'
    }
] 
</script>

<style lang="less" scoped>
.home-top {
    h3 {
        font-size: 22px;
        line-height: 30px;
        text-align: center;
        margin: 0.5rem 0;
    }

    .content {
        --van-tag-primary-color: #FF8000;
        --van-card-font-size: 16px;
        --van-card-background: #f9f9f9;
        background: var(--van-card-background);

        :deep(.van-card) {
            margin-top: 0;

            .van-card__title {
                padding: 10px 0 5px;
            }

            .van-card__price-currency {
                font-size: var(--van-card-font-size);
            }
        }

        &::after {
            content: '';
            display: block;
            height: 3rem;
        }
    }
}
</style>